<template>
	<div class="personal-resources">
		<nav-header>
			<template slot="menuBefore">
				<li><router-link to="/teaching/prepare/personal" tag="a">个人备课</router-link></li>
				<li class="gap">&gt;</li>
			</template>
			<li>资源管理</li>
		</nav-header>
		<div class="zh-table"
			v-loading="loading.status"
			:element-loading-text="loading.txt"
		>
			<div class="zh-table-contents">
				<el-table
				    :data="listData"
				    border
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      	type="index"
                      	:index="typeIndex"
				      	label="序号"
				      	align="center"
				      	show-overflow-tooltip
				      	width="50"
				      >
				    </el-table-column>
				    <el-table-column
					    prop="res_name"
					    label="资源名称"
					    align="center"
				      	show-overflow-tooltip
					>
				    </el-table-column>
				    <el-table-column
					    prop="res_type"
					    label="资源类型"
					    align="center"
				      	show-overflow-tooltip
					>
				    </el-table-column>
			        <el-table-column
			    	    prop="create_number"
			    	    label="上传人账户"
			    	    align="center"
				      	show-overflow-tooltip
			    	>
			        </el-table-column>
				     <el-table-column
					    prop="createname"
					    label="上传人用户名"
					    align="center"
				      	show-overflow-tooltip
					>
				    </el-table-column>
				     <el-table-column
					    prop="uploadtime"
					    label="创建时间"
					    align="center"
				      	show-overflow-tooltip
					>
				    </el-table-column>
				    <el-table-column
				    	align="center"
				      	label="操作"
				      	show-overflow-tooltip
				      	width="130"
				    >
					    <template slot-scope="scope">
				      		<!-- 预览类型--图片预览 --视频预览 --试卷（跳转） -->
					      	<el-button @click="viewResource(scope.row)" type="text" v-if="!['资源', '试卷'].includes(scope.row.res_type)">预览</el-button>
					      	<el-button v-if="parseInt(scope.row.origin)=== 1" @click="downTest(scope.row.res_id)" type="text" size="small">下载 </el-button>
					       <el-button v-else @click="down(scope.row)" type="text" size="small">下载 </el-button>
					      	<el-button @click="deleteRes(scope.row)" type="text" size="small" class="delete-button">删除 </el-button>
					    </template>
				    </el-table-column>
			  	</el-table>
			  	<div class="table-pagination" v-show="total_number > 10">
				  	<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
		<transition name="el-fade-in-linear" >
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox"
					v-loading="viewLoading.status"
					:element-loading-text="viewLoading.txt"
				>
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="viewClose"></i>
					</div>
					<div class="masking_c">
						<nativeVideo  v-if="showVideoPlayer" :playParam.sync="playParam" >
						</nativeVideo>

					</div>
				</div>
			</div>
		</transition>
		
        <transition name="el-fade-in-linear" lock-scroll="false" >
			<div class="masking" :class="{ activeLive: isPDFActive }">
				<div class="maskingBox">
					<div class="masking_h">
						<span>文档预览</span>
						<i class="el-icon-close" @click="viewPDFClose"></i>
					</div>
					<div class="masking-document">
                        <div class="pdf-View">
                            <iframe :src="viwPdfParam.src" frameborder="0" style="width: 100%; height: 100%;"></iframe>
                        </div>
					</div>
				</div>
			</div>
		</transition>
		
        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>

		<el-dialog
			title="音频预览"
			:visible.sync="voiceVisible"
			width="auto"
			style="min-width:550px;"
			top="0"
			custom-class="imgVisible"
			:close-on-click-modal="false"
			:before-close="closeAudio">
			<div class="imgViewx">
				<audio id="voicepoauy" controls="controls" :src="voiceViewUrl"  controlsList="nodownload" autoplay>
				Your browser does not support the audio tag.
				</audio>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import nativeVideo from '../../public/nativeVideo'

	export default {
		data() {
			return {
                imagePreview: {
                    showViewer: false,
                    previewSrcList: []
                },
				loading:{
					status:false,
					txt:'获取数据...'
				},
				listData:[],
				listParam:{
		       		prepareid:this.$route.params.id,
		       		page_index:1,
		       		page_size:10,
				},
				total_number:0,

				isActive: true,
				isPDFActive: true,
				viwPdfParam:{
						src:'',
						loadedRatio: 0,
						page: 1,
						numPages: 0,
						rotate: 0,
				},
				imgVisible: false,
				imgViewUrl:'',
				voiceVisible:false,
				voiceViewUrl:'',
				viewLoading:{
					status:false,
					txt:'加载数据...'
				},
				showVideoPlayer:false,
		        playParam:{play_url:'',},
			}
		},
		created(){
			this.getList();
        },
        computed: {
            imageIndex() {
                return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
            }
        },
		methods:{
            /**
             * 关闭音频播放
             */
            closeAudio() {
                this.voiceVisible = false;
                document.getElementById("voicepoauy").pause();
            },
			//资源预览转发
			viewResource( obj ){
				this.viewLoading.status = true;
				var is_video = 0;
				//视频预览
				if( parseInt(obj.file_type) === 6 ){
					is_video = 1;
					this.isActive = false
				}
				//图片预览
				else if( parseInt(obj.file_type) === 3 ) {
					this.imgVisible  = true;
				}
				//文档预览
				else if( parseInt(obj.file_type) === 1 ){
					this.isPDFActive = false
				}
				//音频预览
				else if( parseInt( obj.file_type ) === 5 ){
					this.voiceVisible = true;
				}else{
					this.$message.warning("不支持预览的资源类型")
					return false;
				}
				let success = ( data => {
					var result  = data.data;
					//视频预览
					if( parseInt(result.file_type) === 6 ){
						this.videoView(result.path);
					}
					//图片预览
					else if( parseInt(result.file_type) === 3 ) {
						this.imgView(result.path);
					}
					//文档预览
					else if( parseInt(result.file_type) === 1 ){
						this.pdfView( result.path);
					}
					//音频预览
					else if( parseInt( result.file_type ) === 5 ){
						this.voiceView(result.path)
						//this.$message.warning("不支持预览的资源类型")
					}else{
						this.$message.warning("不支持预览的资源类型")
					}
				})
				let fail = (data => {
					this.viewLoading.status = false;
					this.$message.error(data.msg)
				})
				this.$ajax.get('api/resource/view_info',{params: {id:obj.res_id,is_video:is_video},func:{success:success,fail:fail}})

			},
			pdfPageChange(val){
				this.viwPdfParam.page  = val;
			},
			error: function(err) {
				//this.$message.error('读取文件失败');
	        },

	        voiceView(url){
	        	this.voiceViewUrl = url;
	        	document.getElementById("voicepoauy").load();	
	        },
            /**
             * 查看图片
             * @param {Object} obj 记录信息
             */
            imgView(url) {
                this.imgViewUrl = url;
                this.imagePreview.showViewer = true;
                this.imagePreview.previewSrcList = [url];
            },
            closeViewer() {
                this.imagePreview.showViewer = false;
            },
			//pdf预览
			pdfView(url){
                this.viwPdfParam.src =  (url)
				// this.viwPdfParam.src =  pdf.createLoadingTask(url)
			},
			viewPDFClose(){
				this.isPDFActive = true
			},
			//关闭视频预览
			viewClose(){
				this.showVideoPlayer = false;
				this.isActive = true
		
			},
			//视频预览
			videoView(url){
				this.showVideoPlayer = true;
				this.playParam.play_url = url;
			},
			// 序号
            typeIndex(index) {
                return index + (this.listParam.page_index - 1) * this.listParam.page_size + 1;
            },
			deleteRes(obj){
				let yes = ( data => {
					let success = ( data => {
			    		this.$message.success(data.msg);
			    		
						if (this.listData.length - this.rowLen === 0) {
							if (this.listParam.page_index > 1) {
								this.listParam.page_index-- ;
							} else {
								this.listParam.page_index = 1;
							}
						}

						this.getList();
					});
		    	this.$ajax.delete('api/prepare/del_prepare_resource',{params:{prepareid:obj.prepare_id,res_id:obj.res_id,origin:obj.origin},func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.res_name+' 删除吗？'});
			},
	
			getList(){
				this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})
							//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
							if(this.$store.state.checkLevel){
									this.listParam.app_code = sessionStorage.getItem('CheckSchoolAppCode')
									this.listParam.type = 0
            			this.$ajax.get('api/prepare/prepare_list',{params: this.listParam,func:{success:success}})
							}else{
            			this.$ajax.get('api/prepare/prepare_res_list',{params: this.listParam,func:{success:success}})
							}
            },
        handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
            down(obj){
	    		var form = document.createElement("form");
	    		var type = parseInt(obj.origin) === 0 ? 0 : 1;
			    form.action = this.BASE_URL+'/index/resource/resourcedownload';
			    form.method = 'post';
			    form.style.display = "none";
				
	            var opt_id = document.createElement("textarea");
	            opt_id.name = 'id';
	            opt_id.value = obj.res_id;
	            form.appendChild(opt_id);
	            var opt_type = document.createElement("textarea");
	            opt_type.name = 'type';
	            opt_type.value = type;
	            form.appendChild(opt_type);
			    document.body.appendChild(form);
			    form.submit();
			    document.body.removeChild(form);
	    	},
	    	 downTest(id){
	    		var form = document.createElement("form");
				form.action = this.BASE_URL+'/index/test/download_test';			   
				form.method = 'post';
			    form.style.display = "none";
				
	            var opt_id = document.createElement("textarea");
	            opt_id.name = 'id';
	            opt_id.value = id;
	            form.appendChild(opt_id);

	            var opt_type = document.createElement("textarea");
	            opt_type.name = 'type';
	            opt_type.value = 0;
	            form.appendChild(opt_type);

	            var opt_format = document.createElement("textarea");
	            opt_format.name = 'format';
	            opt_format.value = 'word';
	            form.appendChild(opt_format);

 				var opt_template = document.createElement("textarea");
	            opt_template.name = 'template';
	            opt_template.value = 'A4';
	            form.appendChild(opt_template);

	            var opt_answer = document.createElement("textarea");
	            opt_answer.name = 'answer';
	            opt_answer.value = 'only_test';
	            form.appendChild(opt_template);
	            

			    document.body.appendChild(form);
			    form.submit();
			    document.body.removeChild(form);
	    	},
		},
		components: {
		    // pdf,
		    nativeVideo
		}
	}
</script>

<style lang="scss">
	.personal-resources{
		.el-table{
			margin-top: 30px;
		}
		.el-table__body-wrapper table tbody {
			td:nth-child(7) {
				padding: 0;
			}
		}
		.masking{
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: .5s;
			background: rgba(0,0,0,.3);
			z-index: 4;
			.maskingBox{
				position: absolute;
				top: 15%;
				left: 50%;
				width: 800px;
				margin-left: -400px;
				background: #fff;
			}
			.masking_h{
				padding: 10px 15px;
				background: #348EFC;
				text-align: center;
				text-align-last: justify;
				>span,
				>i{
					font-size: 16px;
					text-align-last: initial;
					display: inline-block;
					vertical-align: middle;
					color: #fff;
				}
				>i{
					cursor: pointer;
				}
			}

		}

		.masking_c{
			.el-pagination{
				padding-bottom: 20px;
			}
		}

		.activeLive{
			opacity: 0;
			visibility: hidden;
		}

		.imgVisible{
			display: inline-block;
			vertical-align: middle;
			background: none;
			text-align: left;
			min-width: 550px;
			min-height: 550px;
			background: rgba(109, 116, 125, 0.78);
			margin: 0;
			.el-dialog__header{
				// display: none;
			}
			.el-dialog__body{
				text-align: center;
				padding: 0;
				img{
					max-width: 100%;
				}
			}
		}
		.el-dialog__wrapper{
			text-align: center;
		}
	}
</style>